<template>
  <div class="self_bartending_assistant">
    <c-title :hide="false" text="自助调酒"></c-title>
    <diyBackGround :minHeight="'8.5rem'">
      <div class="userBox" slot v-if="info">
        <div class="userImg">
          <img v-if="info.has_one_member" :src="info.has_one_member.avatar_image" alt="" />
        </div>
        <div class="userDetail">
          <div class="name" v-if="info.has_one_member">{{ info.has_one_member.nickname }}</div>
          <div class="mobile" v-if="info.has_one_member">{{ info.has_one_member.mobile }}</div>
          <div class="storeDetail" v-if="info.has_one_store">所属门店：{{ info.has_one_store.name }}</div>
        </div>
      </div>
    </diyBackGround>
    <div class="contenBox">
      <div class="navList">
        <div class="lis" @click="selectUserOpen">
          <i class="iconfont icon-shangpin1"></i>
          <div class="lis_title">门店商品</div>
        </div>
        <div class="lis" @click="to_self_bartending_bartendUser">
          <i class="iconfont icon-goods_brand"></i>
          <div class="lis_title">调酒会员</div>
        </div>
        <div class="lis" v-if="check_permission('1')">
          <i class="iconfont icon-shouhou" @click="to_bartend_after_Sale"></i>
          <div class="lis_title">售后订单</div>
        </div>
      </div>
      <div class="deviceTitle">设备列表</div>
      <div class="deviceList">
        <div class="deviceLis" v-for="item in listData" :key="item" @click="toDetail(item.id)">
          <div class="deviceLis_top">
            <div class="deviceLis_code">设备编码：{{ item.device_sn }}</div>
            <i class="iconfont icon-icon_more11"></i>
          </div>
          <div class="deviceTxt">使用状态：{{ item.use_status_name }}</div>
          <div class="deviceTxt">上线时间：{{ item.online_time }}</div>
        </div>
      </div>
    </div>
    <div class="posBtn set-pc-style" v-if="check_permission('2')">
      <div class="btn" @click="show = true">添加设备</div>
    </div>
    <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" close-on-click-action @select="selectAction" @cancel="onCancel" />
    <!-- 调酒线上下单 用户授权 -->
    <bartendPerOrder :openPopup="selectUser" @close="childClose" @confirm="childConfirm"></bartendPerOrder>
    <!-- 扫码 -->
    <BarScan v-model="openScan" v-if="openScan" :show="openScan" ref="qrcode" @ok="getResult" @err="geterror"></BarScan>
  </div>
</template>
<script>
import diyBackGround from "../../../components/diyBackGround.vue";
import { scrollMixin } from "utils/mixin";
import bartendPerOrder from "../components/bartendPerOrder";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      actions: [
        { name: "扫码添加", id: 1 },
        { name: "手动添加", id: 2 }
      ],
      show: false,
      info: null,
      selectUser: false,
      member_id: "",
      openScan: false,

      listData: [],
      page: 1,
      total_page: 0,
      isLoadMore: false
    };
  },
  activated() {
    this.init();
    this.getData();
    this.getListData();
  },
  methods: {
    childClose() {
      this.selectUser = false;
    },
    childConfirm(e) {
      this.member_id = e.uid;
      this.selectUser = false;
      setTimeout(() => {
        this.$router.push(this.fun.getUrl("self_bartending_store", { store_id: this.info.store_id }, { member_id: this.member_id }));
      }, 100);
    },
    selectUserOpen() {
      if (!this.member_id) {
        this.selectUser = true;
      } else {
        this.$router.push(this.fun.getUrl("self_bartending_store", { store_id: this.info.store_id }, { member_id: this.member_id }));
      }
    },
    selectAction(e) {
      if (e.id == 2) {
        // 手动添加
        this.$router.push(this.fun.getUrl("self_bartending_addDevicel", {}));
        return;
      }
      if (this.fun.isWeiXin()) {
        // 微信环境扫码
        this.wxScanCode();
      } else {
        // H5扫码
        this.openScan = true;
      }
    },
    geterror(e) {
      console.log(e);
      this.openScan = false;
    },
    // H5扫码
    getResult(result) {
      this.openScan = false;
      this.addDevice(result);
    },
    // 添加设备
    async addDevice(code) {
      let { data, msg, result } = await $http.post(
        "plugin.self-bartending.api.employee.device.add",
        {
          device_sn: code
        },
        ""
      );
      if (result) {
        this.$toast(msg);
      } else {
        this.$toast(msg);
      }
    },
    // 微信扫一扫
    wxScanCode() {
      let that = this;
      wx.ready(function() {
        wx.scanQRCode({
          desc: "scanQRCode desc",
          needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            this.addDevice(res.resultStr);
          },
          error: function(err) {
            console.log(err);
            //轻提示
            that.$dialog.alert({
              message: "请使用微信浏览器"
            });
          }
        }); //wx.scanQRcode结束
      });
    },
    toDetail(id) {
      this.$router.push(this.fun.getUrl("self_bartending_devicelDetail", { id: id }));
    },
    to_self_bartending_bartendUser() {
      this.$router.push(this.fun.getUrl("self_bartending_bartendUser", {}));
    },
    to_bartend_after_Sale() {
      this.$router.push(this.fun.getUrl("bartend_after_Sale", {}));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.index.index", {}, "");
      if (result) {
        this.info = data;
      } else {
        this.$toast(msg);
      }
    },
    init() {
      this.member_id = "";
      this.page = 1;
      this.listData = [];
      this.total_page = 0;
    },
    async getListData() {
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.device.index", {}, "");
      if (result) {
        this.listData = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.device.index", { page: this.page }, "");
        this.isLoadMore = true;
        if (result) {
          this.listData = this.listData.concat(data.data);
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  },
  computed: {
    check_permission(status) {
      return function(status) {
        if (this.info && this.info.permission) {
          return this.info.permission.includes(status);
        }
        return false;
      };
    }
  },
  components: {
    diyBackGround,
    bartendPerOrder
  }
};
</script>
<style lang="scss" scoped>
.self_bartending_assistant {
  .posBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 3.75rem;
    background: #ffffff;
    padding: 0.63rem 0.75rem;
    box-sizing: border-box;
    width: 100%;
    .btn {
      margin: 0 0.75rem;
      height: 2.5rem;
      background: #f15353;
      border-radius: 1.28rem;
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
      text-align: center;
      line-height: 2.5rem;
    }
  }
  .contenBox {
    margin: 0 0.75rem;
    margin-top: -2.62rem;
    .deviceTitle {
      margin: 0.97rem 0.28rem;
      font-weight: bold;
      font-size: 0.88rem;
      text-align: left;
    }
    .deviceList {
      padding-bottom: 4rem;
      .deviceLis {
        background: #ffffff;
        border-radius: 0.5rem;
        margin-bottom: 0.63rem;
        padding: 0.97rem 0.75rem;
        box-sizing: border-box;
        .deviceLis_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 0.66rem;
          border-bottom: 1px solid #F0F0F1;
          .deviceLis_code {
            font-weight: bold;
            font-size: 0.88rem;
            color: #00001c;
          }
          .icon-icon_more11 {
            color: #aaaab3;
            font-size: 0.75rem;
          }
        }
        .deviceTxt {
          text-align: left;
          font-size: 0.81rem;
          color: #3b3b4a;
          margin-top: 0.5rem;
        }
      }
    }
    .navList {
      height: 4.91rem;
      background: #ffffff;
      border-radius: 0.5rem;
      display: flex;

      .lis {
        width: calc(100% / 4);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .iconfont {
          font-size: 1.5rem;
        }
        .icon-goods_brand {
          font-weight: bold;
        }
        .lis_title {
          font-size: 0.75rem;
          color: #00001c;
          margin-top: 0.59rem;
        }
      }
    }
  }

  .userBox {
    margin: 1.19rem 1.06rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .userImg {
      width: 3.44rem;
      height: 3.44rem;
      background: #737373;
      margin-right: 0.5rem;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .userDetail {
      text-align: left;
      .name {
        font-size: 1rem;
        color: #ffffff;
        font-weight: bold;
      }
      .mobile {
        font-size: 0.69rem;
        color: #ffffff;
      }
      .storeDetail {
        font-size: 0.69rem;
        color: #ffffff;
      }
    }
  }
}
</style>
